<script setup lang="ts">
import { reactive } from 'vue'
import { ElIcon, ElButton, ElTag, ElTabs, ElTabPane } from 'element-plus'
import { DocumentCopy, Location, MapLocation, Monitor, Position } from '@element-plus/icons-vue'
import AssetTab from './components/asstInfo/assetTab.vue'
import HostNameTab from './components/asstInfo/hostTab.vue'
import WhoisTab from './components/asstInfo/whoisTab.vue'
import CertificateTab from './components/asstInfo/certificateTab.vue'
import OrgTab from './components/asstInfo/orgTab.vue'
import SonHostTab from './components/asstInfo/sonHostTab.vue'
import MoreTab from './components/asstInfo/moreTab.vue'

const infos = reactive({
  ip: '60.214.107.180',
  type: 'IDC服务器',
  port_num: 2,
  serve_num: 2,
  app_num: 2,
  loophole_num: 2,
  location: '浙江 - 杭州',
  longitude: '116.46',
  latitude: '39.92',
  system: 'Linux',
  update_time: '2024-03-28 11:25:29'
})

const activeName = 'asset'

const tabNum = reactive({
  asset: 24,
  host: 24,
  whois: 24,
  certificate: 24,
  org: 24,
  sonHost: 24,
  more: 24
})

// 复制ip地址
const copy = () => {}

// 资产调查
const open = () => {}
</script>

<template>
  <div class="jm-container flex">
    <div class="info-view flex">
      <div class="left jm-bg-color flex">
        <img src="@/assets/images/device.png" alt="" class="img" />
        <div class="infos">
          <div class="title flex">
            <div class="ip">{{ infos.ip }}</div>
            <el-icon @click="copy" class="pointer"><DocumentCopy /></el-icon>
          </div>
          <el-tag class="tags" type="primary">
            {{ infos.type }}
          </el-tag>
          <div class="numbers flex">
            <div>端口数：{{ infos.port_num }}</div>
            <div>服务数：{{ infos.serve_num }}</div>
            <div>应用数：{{ infos.app_num }}</div>
            <div>漏洞数：{{ infos.loophole_num }}</div>
          </div>
          <div class="location flex">
            <div class="flex">
              <el-icon class="icon"><Location /></el-icon>{{ infos.location }}
            </div>
            <div class="flex">
              <el-icon class="icon"><MapLocation /></el-icon>
              {{ `经纬度：(${infos.longitude},${infos.latitude})` }}
            </div>
            <div class="flex">
              <el-icon class="icon"><Monitor /></el-icon>
              <span>{{ `操作系统：${infos.system}` }}</span>
            </div>
            <div class="flex">
              <el-button :icon="Position" @click="open" link type="primary">资产调查</el-button>
            </div>
          </div>
          <div class="update">{{ `最新更新时间：${infos.update_time}` }}</div>
        </div>
      </div>
      <div class="map jm-bg-color">地图定位区域</div>
    </div>
    <div class="tab-view jm-bg-color">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="`资产测绘(${tabNum.asset})`" name="asset">
          <AssetTab />
        </el-tab-pane>
        <el-tab-pane :label="`域名解析(${tabNum.host})`" name="host">
          <HostNameTab />
        </el-tab-pane>
        <el-tab-pane :label="`whois(${tabNum.whois})`" name="whois">
          <WhoisTab />
        </el-tab-pane>
        <el-tab-pane :label="`数字证书(${tabNum.certificate})`" name="certificate">
          <CertificateTab />
        </el-tab-pane>
        <el-tab-pane :label="`组织机构(${tabNum.org})`" name="org">
          <OrgTab />
        </el-tab-pane>
        <el-tab-pane :label="`子域名(${tabNum.sonHost})`" name="sonHost">
          <SonHostTab />
        </el-tab-pane>
        <el-tab-pane :label="`更多(${tabNum.more})`" name="more">
          <MoreTab />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<style scoped lang="scss">
.flex {
  display: flex;
}
.pointer {
  font-size: 1.25rem;
  cursor: pointer;
}
.jm-container {
  flex-direction: column;
  padding: 0;
  .info-view {
    justify-content: space-between;
    height: 15.625rem;
    .left {
      padding: 0.625rem;
      width: 73%;
      height: 100%;
      .img {
        height: 100%;
      }
      .infos {
        padding: 1.25rem 0.3125rem;
        .title {
          align-items: center;
          margin-bottom: 0.625rem;
          .ip {
            font-size: 1.375rem;
            font-weight: 700;
            margin-right: 0.625rem;
          }
        }
        .numbers {
          margin-top: 0.625rem;
          div {
            margin-right: 1.25rem;
          }
        }
        .location {
          margin-top: 0.625rem;
          > div {
            align-items: center;
            margin-right: 1.25rem;
            .icon {
              margin-right: 0.3125rem;
            }
          }
        }
        .update {
          margin-top: 0.625rem;
          color: var(--el-color-info-light-5);
        }
      }
    }
    .map {
      width: 26%;
      height: 100%;
    }
  }
  .tab-view {
    padding: 0.625rem 1.25rem;
    margin-top: 0.625rem;
    min-height: 12.5rem;
  }
}
</style>
